import { ResultPage, Card, Switch, Button } from "antd-mobile";
import "./style.css";
import { useSelector, useDispatch } from "react-redux";
import { LoopOutline } from "antd-mobile-icons";
import {cityExchange, citySetIsSpeed} from '../../reducers/citySlice'
import dayjs from 'dayjs' 
import { useMemo } from "react";


const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//实现首页的两地交换，日期星期，按钮，搜索
function Home() {
    const citySlice = useSelector((state) => state.citySlice);
    const dispatch = useDispatch();
    const exChangeFN = () => {
        dispatch(cityExchange());
    }
    const dayNum = useMemo(() => {
        return dayjs(citySlice.date).day();
    }, [citySlice.date]);

    const isSpeedChange = (checked) => {
        dispatch(citySetIsSpeed(checked))
    }
    return (
        <ResultPage
            status=""
            title="火车票"
            description="边界购票，服务您的每一次出行"
        >
            <Card className="city_box">
                <div className="city_select">
                    <div>{citySlice.start}</div>

                    <LoopOutline onClick={exChangeFN} />
                    
                    <div  className="city_select_end">{citySlice.end}</div>
                </div>

                <div className="city_date" >
                    {citySlice.date}
                    <span>{days[dayNum]}</span>
                </div>

                <div className="city_isSpeed">
                    <span>是否只看高铁</span>
                    <Switch checked={citySlice.isSpeed} onChange={isSpeedChange} />
                </div>

                <div className="city_search_btn">
                    <Button block color="primary" size="middle" >
                        搜索
                    </Button>
                </div>
            </Card>
        </ResultPage>
    );
}

export default Home;